<template>
  <div class="app-container">

    <PageTools>
      <template #after>
        <el-form inline class="son">
          <el-form-item>
            <el-input
              v-model.trim="queryData.role_name"
              size="small"
              placeholder="角色名称"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="small"
              class="btn ss"
              @click="onSubmit"
            >搜索</el-button>
            <el-button size="small" class="ss" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
        <el-button type="primary" size="primary" plain @click="$refs.addForm.dialogShow=true">创建角色</el-button>
      </template>
      <template #content>
        <div>
          <el-table stripe :data="list" border>
            <el-table-column prop="id" label="角色ID" />
            <el-table-column prop="role_name" label="角色名称" />
            <el-table-column prop="identify" label="角色标识" />
            <el-table-column width="240" prop="description" label="角色描述" />
            <el-table-column prop="created_at" label="添加时间" />
            <el-table-column align="center" label="操作">
              <template slot-scope="{ row }">
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  @click="editRow(row.id)"
                />
                <el-button
                  size="small"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="delRow(row.id)"
                />
              </template>
            </el-table-column>
          </el-table>
          <br>
          <!-- 分页区域 -->
          <el-row type="flex" justify="end">
            <el-pagination
              :current-page.sync="queryData.page"
              :page-sizes="[10, 20, 30, 100 ]"
              :page-size="queryData.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalNum"
              background
              @size-change="sizeChange"
              @current-change="currentChange"
            />
          </el-row>

          <addRole ref="addForm" @updateList="initData" />
        </div>
      </template>
    </PageTools>
  </div>
</template>

<script>
import {
  getRoleList,
  getRoleId,
  delRole
} from '@/api/role'
import addRole from './components/add-role.vue'
export default {
  name: 'Role',
  components: {
    addRole
  },
  data() {
    return {
      list: [], // 表格数据
      totalNum: 0, // 总数
      // 列表的需要的参数
      queryData: {
        role_name: '',
        page: 1,
        limit: 10
      }
    }
  },
  created() {
    // 调用初始化
    this.initData()
  },
  methods: {
    // 初始化数据
    async initData() {
      // 发起请求
      const res = await getRoleList(this.queryData)
      // 数据可能需要加工
      // 赋值
      // console.log(res.list)
      this.totalNum = res.total
      this.list = res.list
    },
    // 搜索提交
    onSubmit() {
      // 页码变成1
      this.queryData.page = 1
      // 拉取列表
      this.initData()
    },
    // 搜索重置
    onReset() {
      // 重置搜索表单
      this.queryData = {
        role_name: '',
        page: 1,
        limit: 10
      }
      // 拉取列表
      this.initData()
    },
    // 每页数量变化的时候
    sizeChange(newSize) {
      // newSize 最新的每页数量
      this.queryData.limit = newSize
      this.initData()
    },
    // 页码变化事件
    currentChange(newPage) {
      // newPage 最新的页码
      this.queryData.page = newPage
      this.initData()
    },
    // 修改事件
    async editRow(rowId) {
      // 获取改行的数据
      const res = await getRoleId(rowId)
      // console.log(res)

      const arr = []
      res.authlist.forEach(item => {
        // arr.push(item.id)
        item.children.forEach(obj => {
          // arr.push(obj.id)
          obj.children.forEach(narr => {
            arr.push(narr.id)
          })
        })
      })
      // 赋给弹框里面的表单
      this.$refs.addForm.formData = res
      this.$refs.addForm.formData.authlist = arr
      // console.log(arr)
      this.$refs.addForm.getcheck(arr)
      // console.log(this.$refs.addForm.formData = res)
      // 复杂点：一些负责的表单控件需要手动去回显
      // 打开弹框
      this.$refs.addForm.dialogShow = true
    },
    // 删除事件
    async delRow(rowId) {
      // console.log(rowId)

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发生删除请求
        delRole(rowId)
        // 判断删除角色
        if (rowId === 29) return this.$message.error('超级管理员不允许删除')
        if (rowId === 31 || rowId === 32 || rowId === 58 || rowId === 59) return this.$message.error('默认数据不允许删除')
        // 提示成功
        // 边缘问题：如果不是第一页，且这一页只有一个，且删除成功，页码需要-1
        if (this.queryData.page > 1 && this.list.length === 1) {
          this.queryData.page--
        }
        // 列表更新
        this.initData()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}

</script>

<style scoped lang="scss">
.container {
  padding: 30px;
  position: relative;
}
.son{
  position: absolute;
  left: -612px;
  top: 0;
}
 ::v-deep .el-input__inner {
  height: 40px;
}
::v-deep .el-button--small.ss{
height: 40px;
}
::v-deep .el-button--small.btn{
 width: 60px;
color: #409eff;
border: 1px solid rgba(145, 213, 255, 1);
 background:#ecf5ff;
}
::v-deep .el-button--small.btn:hover{
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .el-select .el-input .el-input__inner{
  height: 28px;
}
</style>

